/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import './mixins/common.less';
@import './mixins/button.less';
@import '../custom.less';

@grid-button-prefix-cls: ~'@{css-prefix}grid-button';
@grid-icon-prefix-cls: ~'@{css-prefix}grid-icon';
@input-prefix-cls: ~'@{css-prefix}input';
@button-prefix-cls: ~'@{css-prefix}button';

.@{grid-button-prefix-cls} {
  position: relative;
  text-align: center;
  background-color: var(--ti-grid-light-color);
  outline: 0;
  font-size: var(--ti-grid-font-size);
  white-space: nowrap;
  user-select: none;
  appearance: none;

  &.is__disabled {
    color: var(--ti-grid-primary-disabled-text-color);

    &:not(.is__loading) {
      cursor: no-drop;
    }
  }

  &:not(.is__disabled) {
    color: var(--ti-grid-primary-color);
    cursor: pointer;
  }

  &.is__loading {
    &:before {
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: hsla(0, 0%, 100%, 0.35);
      pointer-events: none;
    }
  }

  &.type__text {
    text-decoration: none;
    border: 0;
    background-color: transparent;

    &:not(.is__disabled) {
      &:hover {
        color: var(--ti-grid-primary-hover-color);
      }
    }
  }

  &.type__button {
    padding: 0 12px;
    line-height: 28px;
    border: 1px solid var(--ti-grid-border-color);
    border-radius: 2px;

    &.theme__primary {
      color: var(--ti-grid-light-color);
      border-color: var(--ti-grid-primary-color);
      background-color: var(--ti-grid-primary-color);

      &:not(.is__disabled) {
        &:hover {
          .ButtonPrimaryHover(var(--ti-grid-primary-hover-color));
        }

        &:active {
          color: var(--ti-grid-light-color);
          background-color: var(--ti-grid-primary-active-color);
          border-color: var(--ti-grid-primary-active-color);
        }
      }
    }

    &:not(.theme__primary) {
      &:not(.is__disabled) {
        &:hover {
          .ButtonHover(var(--ti-grid-primary-color));
        }

        &:active {
          color: var(--ti-grid-primary-active-color);
          border-color: var(--ti-grid-primary-active-color);
        }
      }
    }

    &.size__medium {
      padding: 0 14px;
      line-height: 28px;
    }

    &.size__small {
      padding: 0 12px;
      line-height: 26px;
    }

    &.size__mini {
      padding: 0 10px;
      line-height: 24px;
    }
  }

  &.size__small,
  &.size__mini {
    font-size: var(--ti-common-font-size-base);
  }

  & + &,
  & + &__dropdown {
    .ButtonInterval();
  }

  &__loading-icon {
    margin-right: 5px;
  }

  &__wrapper,
  &__dropdown {
    display: inline-block;
  }

  &__dropdown {
    position: relative;

    & + .@{grid-button-prefix-cls},
    & + .@{grid-button-prefix-cls}__dropdown {
      .ButtonInterval();
    }

    &.is__active {
      & > .@{grid-button-prefix-cls} {
        &.theme__primary {
          .ButtonPrimaryHover(var(--ti-grid-primary-hover-color));
        }

        &:not(.is__disabled) {
          &:not(.theme__primary) {
            .ButtonHover(var(--ti-grid-primary-color));
          }
        }
      }

      .@{grid-button-prefix-cls}__dropdown-wrapper {
        display: block;
      }

      .@{grid-button-prefix-cls}__dropdown-arrow {
        transform: rotate(315deg);

        &.@{grid-icon-prefix-cls}__arrow-bottom {
          margin-top: -2px;
        }
      }
    }

    .@{grid-button-prefix-cls}__dropdown-arrow {
      font-size: var(--ti-common-font-size-base);
      margin-left: 5px;
      .animatTransition(transform, 0.2s);
    }

    .@{grid-button-prefix-cls}__dropdown-wrapper {
      display: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 5px;
      z-index: 100;
      padding: 5px;
      background-color: var(--ti-grid-light-color);
      border-radius: 4px;
      border: 1px solid var(--ti-grid-border-color);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

      & > .@{grid-button-prefix-cls} {
        margin: 0;
        display: block;
        width: 100%;
        border: 0;

        &.type__text {
          padding: 2px 8px;
        }
      }
    }
  }

  &__wrapper {
    .@{input-prefix-cls} {
      width: 270px;
    }

    .@{input-prefix-cls},
    .@{button-prefix-cls} {
      vertical-align: middle;
    }
  }
}
